import React, { useEffect, useState } from 'react';
import *as service from '../../../../api/Salaryaccounting'
import { Button, Table, Drawer, Form, Input, message, Tag, Select, Switch, Radio, Space } from 'antd'
import type { ColumnsType } from 'antd/es/table';
import type { DrawerProps } from 'antd/es/drawer';
import { PlusOutlined, ArrowDownOutlined } from '@ant-design/icons'
import './Salaryproject.scss'
interface Props {

}
function Salaryproject(props: Props) {
    interface DataType {
        id: number;
        name: string;
        attribute: string;
        changeitem: string;
        type: string;
        rules: string;
        retain: string;
        manner: string;
        toquote: string;
        states: number;
    }
    var [tableData, setTableData] = useState<DataType[]>([]) //定义表格组件状态--数据
    const [open, setOpen] = useState(false); //定义抽屉开关初始值
    var [form] = Form.useForm() //定义表单
    let [flig, setFlig] = useState(true)//自定义开关-项目新增，编辑使用
    let [id, setid] = useState(0)
    // 发送表格内容请求
    let corporateprotectionlist = async () => {
        let res = await service.Salaryproject_list()
        setTableData(res.data.data)
    }

    // 组件挂载期
    useEffect(() => {
        corporateprotectionlist()
    }, [])

    // 抽屉开
    const showDrawer = () => {
        setOpen(true);
    };
    // 抽屉关
    const onClose = () => {
        setOpen(false);
        form.setFieldsValue({ name: '', attribute: '', changeitem: '', type: '', rules: '', retain: '', manner: '', toquote: '', state: '' })
        setFlig(true)
    };

    //数据源
    const columns: ColumnsType<DataType> = [
        {
            title: '序号', //表格列的标题
            render: (_, record) => <a>{tableData.indexOf(record) + 1}</a>,//动态渲染标签/组件
        },
        {
            title: '薪资项目', //表格列的标题
            key: 'name',
            render: (_, record) => <div>{record.name}</div>//动态渲染标签/组件
        },
        {
            title: '属性', //表格列的标题
            key: 'attribute',
            render: (_, record) => <div>{record.attribute}</div>,//动态渲染标签/组件
        },
        {
            title: '加项/减项', //表格列的标题
            key: 'changeitem',
            render: (_, record) => <div>{record.changeitem}</div>,//动态渲染标签/组件
        },
        {
            title: '类型', //表格列的标题
            key: 'type',
            render: (_, record) => <div>{record.type} </div>,//动态渲染标签/组件
        },
        {
            title: '小数点保留规则', //表格列的标题
            key: 'rules',
            render: (_, record) => <div>{record.rules}</div>,//动态渲染标签/组件
        },
        {
            title: '保留小数点', //表格列的标题
            key: 'retain',
            render: (_, record) => <div>{record.retain}</div>,//动态渲染标签/组件
        },
        {
            title: '取值方式', //表格列的标题
            key: 'manner',
            render: (_, record) => <div>{record.manner}</div>,//动态渲染标签/组件
        },
        {
            title: '薪资档案引用', //表格列的标题
            key: 'toquote',
            render: (_, record) => <div>{record.toquote}</div>,//动态渲染标签/组件
        },
        {
            title: '状态', //表格列的标题
            key: 'state',
            render: (_, record) => <div> <Switch defaultChecked onChange={(checked) => { onChange(checked, record) }} /></div>,//动态渲染标签/组件
        },
        {
            title: '操作', //表格列的标题
            render: (_, record) => <div>
                <button style={{ color: 'blue', border: "none", backgroundColor: '#fff', cursor: 'pointer' }} onClick={() => { jobupdata(record) }}>编辑</button>
                &emsp;
                &emsp;
                <button style={{ color: 'red', border: "none", backgroundColor: '#fff', cursor: 'pointer' }} onClick={() => { jobdelete(record) }}>删除</button>
            </div>,//动态渲染标签/组件
        },
    ]

    //状态按钮事件
    const onChange = async (checked: boolean, record: any) => {
        let { states, ...values } = record
        states = checked ? 1 : 0
        let res = await service.Salaryproject_edit({ states, ...values })
        if (res.data.code == 200) {
            corporateprotectionlist()
            message.success({ content: '操作成功' })
            onClose()
        }
    };
    //验证通过后的方法
    let onFinish = async (FinishValue: any) => {
        console.log(FinishValue);
        if (flig) {
            let res = await service.Salaryproject_add(FinishValue)
            console.log(res.data);
            if (res.data.code == 200) {
                corporateprotectionlist()
                message.success({ content: '添加项目成功' })
                onClose()
            }
        } else {
            let res = await service.Salaryproject_edit({ id: id, ...FinishValue })
            if (res.data.code == 200) {
                corporateprotectionlist()
                message.success({ content: '编辑项目成功' })
                onClose()
            }
        }
    }
    //验证失败时执行
    let onFinishFailed = (FinishFailedValue: any) => {
        console.log(FinishFailedValue)
    }
    // 编辑
    let jobupdata = (record: any) => {
        setid(record.id)
        setFlig(false)
        setOpen(true);
        form.setFieldsValue(record)
    }
    //删除
    let jobdelete = async (record: any) => {
        let res = await service.Salaryproject_delete({ id: record.id })
        if (res.data.code == 200) {
            corporateprotectionlist()
            message.success({ content: '删除成功' })
        }
    }
    return (
        <div className='Salaryproject'>
            <h2>薪资项目</h2>
            <div className="opts">
                <Button onClick={() => { showDrawer() }} style={{ marginRight: 10 }} type='primary'>新增薪资项目<PlusOutlined /></Button>
                <Drawer title={flig ? '新增薪资项目' : '修改薪资项目'} placement="right" onClose={onClose} open={open}>
                    <Form
                        className='from'
                        form={form}
                        style={{ maxWidth: 400 }}
                        onFinish={onFinish}
                        onFinishFailed={onFinishFailed}
                    >
                        <Form.Item
                            label="项目名称"
                            name="name"
                            rules={[{ required: true, message: '项目名称' }]}
                        >
                            <Input placeholder='请输入项目名称' />
                        </Form.Item>
                        <Form.Item
                            label="属性"
                            name="attribute"
                            rules={[{ required: true, message: '属性' }]}
                        >
                            <Input placeholder='请输入属性' />
                        </Form.Item>

                        <Form.Item
                            label="加项/减项"
                            name="changeitem"
                            rules={[{ required: true, message: '加项/减项' }]}
                        >
                            <Input placeholder='加项/减项' />
                        </Form.Item>

                        <Form.Item
                            label="类型"
                            name="type"
                            rules={[{ required: true, message: '类型' }]}
                        >
                            <Input placeholder='请输入类型' />
                        </Form.Item>

                        <Form.Item
                            label="小数点保留规则"
                            name="rules"
                            rules={[{ required: true, message: '小数点保留规则' }]}
                        >
                            <Input placeholder='请输入小数点保留规则' />
                        </Form.Item>

                        <Form.Item
                            label="保留小数点"
                            name="retain"
                            rules={[{ required: true, message: '保留小数点' }]}
                        >
                            <Input placeholder='请输入保留小数点' />
                        </Form.Item>

                        <Form.Item
                            label="取值方式"
                            name="manner"
                            rules={[{ required: true, message: '取值方式' }]}
                        >
                            <Input placeholder='请输入取值方式' />
                        </Form.Item>

                        <Form.Item
                            label="薪资档案引用"
                            name="toquote"
                            rules={[{ required: true, message: '薪资档案引用' }]}
                        >
                            <Select
                                style={{ width: 120 }}
                                options={[
                                    { value: "是", label: '是' },
                                    { value: "否", label: '否' }
                                ]}
                            />
                        </Form.Item>

                        <Form.Item
                            label="状态"
                            name="states"
                            rules={[{ required: true, message: '状态' }]}
                        >
                            <Select
                                style={{ width: 120 }}
                                options={[
                                    { value: 1, label: '启用' },
                                    { value: 0, label: '未启用' }
                                ]}
                            />
                        </Form.Item>

                        <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                            <Button type="primary" htmlType="submit">
                                {flig ? '新增项目' : "修改项目"}
                            </Button>
                        </Form.Item>
                    </Form>
                </Drawer>
            </div>
            <Table size={'small'} columns={columns} dataSource={tableData} style={{ marginTop: 20 }} rowKey={""} pagination={{ pageSize: 5 }} />
        </div >
    );
}


export default Salaryproject;